<template>
	<view class="goods_list">
		<goods-list @goodsItemClick="goGoodsDetail" :goods="goods"></goods-list>
		<view class="isOver" v-if="flag">-----没有更多数据啦-----</view>
	</view>
</template>

<script>
import goodsList from '../../components/goods-list/goods-list.vue'
export default {
	data() {
		return {
			goods: [],
			pageindex: 1,
			flag: false
		}
	},
	components: {
		"goods-list": goodsList
	},
	onLoad() { 
		this.getGoodsList ()
	},
	// 触底事件，下拉显示更多数据
	onReachBottom() {
		if(this.goods.length<this.pageindex*10) return this.flag = true
		this.pageindex++
		this.getGoodsList()
	},
	// 下拉刷新，重置数据,在获取数据列表后拿到回调函数停止刷新
	onPullDownRefresh() {
		this.pageindex = 1
		this.goods = []
		this.flag = false
		setTimeout(()=>{
		  this.getGoodsList(()=>{
				uni.stopPullDownRefresh()
			})	
		},1000)
	},
	methods: {
		async getGoodsList (callBack) {
			const res = await this.$myRequest({
				url: '/api/getgoods?pageindex='+this.pageindex
			})
			this.goods = [...this.goods,...res.data.message]
			callBack && callBack()
		},
		// 导航到商品详情页
		goGoodsDetail (id) {
			uni.navigateTo({
				url: '/pages/goods-detail/goods-detail?id='+id
			})
		}
	},

}
</script>

<style>
	.goods_list {
		background: #eee;
	}
	.isOver {
		width: 100%;
		height: 50px;
		line-height: 50px;
		text-align: center;
		font-size: 28rpx;
	}
</style>
